<script setup>/**
 * name：
 * user：sa0ChunLuyu
 * date：2023年8月10日 10:20:24
 */
import {
  RequestLogTxtAction,
  RequestLogListAction,
  $response
} from '~/api'
import $router from '~/router'
import {onBeforeRouteUpdate} from "vue-router";
import VueJsonPretty from 'vue-json-pretty';
import {$copy} from "~/tool/copy";

const default_page_options = {
  search: '',
  time: [null, null],
  method: '',
  code: '',
  page: 1,
}
const page_options = ref(JSON.parse(JSON.stringify(default_page_options)))
onBeforeRouteUpdate((to) => {
  routerChange(to.query)
})
const table_list = ref([])
const last_page = ref(0)
const RequestLogList = async () => {
  const response = await RequestLogListAction(page_options.value)
  $response(response, () => {
    table_list.value = response.data.list.data
    last_page.value = response.data.list.last_page
    page_options.value.time = response.data.time
  })
}

const routerChange = (query) => {
  page_options.value = {
    search: query.search || default_page_options.search,
    time: !!query.time && query.time !== 'null' ? JSON.parse(query.time) : default_page_options.time,
    method: query.method || default_page_options.method,
    code: query.code || default_page_options.code,
    page: Number(query.page) || default_page_options.page,
  }
  RequestLogList()
}

onMounted(() => {
  routerChange($router.currentRoute.value.query)
})
const searchClick = (page = 1) => {
  page_options.value.page = page
  let query = JSON.parse(JSON.stringify(page_options.value))
  query.time = JSON.stringify(query.time)
  $router.push({query})
}
const searchClearClick = () => {
  let query = JSON.parse(JSON.stringify(default_page_options))
  query.time = JSON.stringify(query.time)
  $router.push({query})
}
const json_show = ref(false)
const json_str = ref({})
const jsonShowClick = (data) => {
  json_str.value = data
  json_show.value = true
}

const copyClick = () => {
  $copy(JSON.stringify(json_str.value, null, 2), () => {
    window.$message().success('内容已复制')
  })
}

const txtShowClick = async (data) => {
  const response = await RequestLogTxtAction(data)
  $response(response, () => {
    jsonShowClick(JSON.parse(response.data.data))
  })
}
</script>
<template>
  <div>
    <el-dialog v-model="json_show" title="数据查看" width="800px"
               :close-on-click-modal="false"
               :close-on-press-escape="false"
               :show-close="false">
      <div>
        <el-scrollbar height="300px">
          <VueJsonPretty :data="json_str"></VueJsonPretty>
        </el-scrollbar>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="json_show = false">关闭</el-button>
          <el-button @click="copyClick()" type="primary">复制</el-button>
        </div>
      </template>
    </el-dialog>

    <el-card>
      <template #header>请求日志</template>
      <div>
        <div class="input_line_wrapper">
          <div my-1 class="input_line_tag_wrapper">
            <el-tag w-full type="info">搜索</el-tag>
          </div>
          <div ml-2 my-1>
            <el-input @keydown.enter="searchClick()" class="input_line_input_wrapper" v-model="page_options.search"
                      placeholder="请输入搜索"></el-input>
          </div>
          <div ml-2 my-1 class="input_line_tag_wrapper">
            <el-tag w-full type="info">时间范围</el-tag>
          </div>
          <div ml-2 my-1>
            <el-date-picker v-model="page_options.time" type="daterange" range-separator="至"
                            start-placeholder="开始时间" end-placeholder="结束时间" value-format="YYYY-MM-DD"/>
          </div>
          <div ml-2 my-1 class="input_line_tag_wrapper">
            <el-tag w-full type="info">类型</el-tag>
          </div>
          <div ml-2 my-1>
            <el-select v-model="page_options.method" class="input_line_input_wrapper"
                       placeholder="请选择类型">
              <el-option label="全部" value=""/>
              <el-option label="POST" value="POST"/>
              <el-option label="GET" value="GET"/>
            </el-select>
          </div>
          <div ml-2 my-1 class="input_line_tag_wrapper">
            <el-tag w-full type="info">返回码</el-tag>
          </div>
          <div ml-2 my-1>
            <el-input @keydown.enter="searchClick()" class="input_line_input_wrapper" v-model="page_options.code"
                      placeholder="请输入返回码"></el-input>
          </div>
          <el-button my-1 @click="searchClick()" ml-3 type="primary">搜索</el-button>
          <el-button my-1 @click="searchClearClick()" type="warning">清空</el-button>
        </div>
        <el-table mt-1 border :data="table_list" style="width: 100%">
          <el-table-column label="身份信息" width="500">
            <template #default="scope">
              <div my-1 class="input_line_wrapper">
                <div class="input_line_tag_wrapper">
                  <el-tag w-full type="info">UUID</el-tag>
                </div>
                <div ml-2>{{ scope.row.uuid }}</div>
              </div>
              <div my-1 class="input_line_wrapper">
                <div class="input_line_tag_wrapper">
                  <el-tag w-full type="info">Token</el-tag>
                </div>
                <div ml-2>{{ scope.row.token }}</div>
              </div>
              <div my-1 class="input_line_wrapper">
                <div class="input_line_tag_wrapper">
                  <el-tag w-full type="info">IP</el-tag>
                </div>
                <div ml-2>{{ scope.row.ip }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="请求信息" width="400">
            <template #default="scope">
              <div my-1 class="input_line_wrapper">
                <div class="input_line_tag_wrapper">
                  <el-tag w-full type="info">Url</el-tag>
                </div>
                <div ml-2>{{ scope.row.url }}</div>
              </div>
              <div my-1 class="input_line_wrapper">
                <div class="input_line_tag_wrapper">
                  <el-tag w-full type="info">类型</el-tag>
                </div>
                <div ml-2>
                  <el-tag v-if="scope.row.method === 'GET'" type="success">GET</el-tag>
                  <el-tag v-else-if="scope.row.method === 'POST'">POST</el-tag>
                  <el-tag v-else type="warning">{{ scope.row.method }}</el-tag>
                </div>
              </div>
              <div my-1 class="input_line_wrapper">
                <div class="input_line_tag_wrapper">
                  <el-tag w-full type="info">参数</el-tag>
                </div>
                <div ml-2>
                  <el-button v-if="scope.row.type === 1" :disabled="!scope.row.result"
                             @click="jsonShowClick({
                  params:JSON.parse(scope.row.params),
                  input:JSON.parse(scope.row.input),
                  header:JSON.parse(scope.row.header),
                  })" type="primary" size="small">查看
                  </el-button>
                  <el-button v-else @click="txtShowClick({
                  id:scope.row.id,
                  created_at:scope.row.created_at,
                  type:'input'
                  })"
                             type="primary" size="small">查看
                  </el-button>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="处理信息" width="250">
            <template #default="scope">
              <div my-1 class="input_line_wrapper">
                <div class="input_line_tag_wrapper">
                  <el-tag w-full type="info">存储类型</el-tag>
                </div>
                <div ml-2>
                  <el-tag :type="scope.row.type === 1 ? '' : 'success'">{{
                      scope.row.type === 1 ? '数据库' : '文件'
                    }}
                  </el-tag>
                </div>
              </div>
              <div my-1 class="input_line_wrapper">
                <div class="input_line_tag_wrapper">
                  <el-tag w-full type="info">返回码</el-tag>
                </div>
                <div ml-2>
                  <el-tag :type="Number(scope.row.code) === 200 ? 'success' : 'warning'">
                    {{ !!scope.row.code ? scope.row.code : '未处理完成' }}
                  </el-tag>
                </div>
              </div>
              <div my-1 class="input_line_wrapper">
                <div class="input_line_tag_wrapper">
                  <el-tag w-full type="info">返回</el-tag>
                </div>
                <div ml-2>
                  <el-button v-if="scope.row.type === 1" :disabled="!scope.row.result"
                             @click="jsonShowClick(JSON.parse(scope.row.result))"
                             type="primary" size="small">查看
                  </el-button>
                  <el-button v-else :disabled="!scope.row.result" @click="txtShowClick({
                  id:scope.row.id,
                  created_at:scope.row.created_at,
                  type:'result'
                  })"
                             type="primary" size="small">查看
                  </el-button>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="处理时间">
            <template #default="scope">
              <div my-1 class="input_line_wrapper">
                <div class="input_line_tag_wrapper">
                  <el-tag w-full type="info">请求时间</el-tag>
                </div>
                <div ml-2>{{ scope.row.created_at }}</div>
              </div>
              <div my-1 class="input_line_wrapper">
                <div class="input_line_tag_wrapper">
                  <el-tag w-full type="info">返回时间</el-tag>
                </div>
                <div ml-2>{{ scope.row.updated_at }}</div>
              </div>
              <div my-1 class="input_line_wrapper">
                <div class="input_line_tag_wrapper">
                  <el-tag w-full type="info">执行速度</el-tag>
                </div>
                <div ml-2>{{ !!scope.row.spend ? `${scope.row.spend}` : '0' }}s</div>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination v-if="last_page > 1" :current-page="page_options.page" mt-2 background layout="prev, pager, next"
                       :page-count="last_page" @update:current-page="searchClick"/>
      </div>
    </el-card>
  </div>
</template>
<style>

</style>
<style scoped>

</style>
<route>
{"meta":{"title":"请求日志"}}
</route>
